<template>
  <MainLayout>
    <template #header>
      <div class="flex_block header_modal cur_poi" @click="handleBack">
        <el-icon class="title icon"><ArrowLeftBold /></el-icon>
        <div class="title">测试记录详情</div>
      </div>
    </template>
    <template #main>
      <!-- 内容 -->
      <div class="search_layout">
        <SearchLayout>
          <template #search>
            <div class="header_modal search_modal">
              <div class="header_modal_item">
                <el-input
                  v-model="search_params.queryParams.name"
                  clearable
                  placeholder="请输入用例名称"
                ></el-input>
              </div>
              <div class="header_modal_item">
                <el-select
                  v-model="search_params.queryParams.recordResult"
                  placeholder="请选择用例结果"
                  size="default"
                  clearable
                >
                  <el-option
                    class="select_item"
                    v-for="item in test_result_list"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  />
                </el-select>
              </div>

              <el-button type="primary" @click="handleSearchData('search')"
                >搜索</el-button
              >
              <el-button @click="handleReset">重置</el-button>
              <el-button type="success" @click="handleActiveTableCase"
                >执行选中用例</el-button
              >
            </div>
          </template>
          <template #table>
            <el-table
              :data="table_list"
              border
              v-loading="table_loading"
              @selection-change="handleSelectionChange"
              :style="{ height: 'calc(100vh - 280px)' }"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                prop="name"
                label="用例名"
                min-width="120"
                align="center"
              />
              <!-- <el-table-column
                prop="title"
                label="标题"
                min-width="120"
                align="center"
              /> -->
              <el-table-column
                prop="scene"
                label="测试场景"
                min-width="100"
                align="center"
              />
              <el-table-column
                prop="severity"
                label="优先级"
                min-width="80"
                align="center"
              />
              <el-table-column
                prop="exampleResult"
                label="用例结果"
                min-width="100"
                align="center"
              >
                <template #default="{ row }">
                  {{ handleTestResultLabel(row.exampleResult) }}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="100"
                fixed="right"
                align="center"
              >
                <template #default="{ row }">
                  <div class="flex_block_around operate_block">
                    <div
                      class="color_primary cursor_pointer"
                      @click="handleDetails(row)"
                    >
                      查看
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <Pagination
              :page="search_params.pageNum"
              :size="search_params.pageSize"
              :total="table_total"
              @change="handlePaginationChange"
            ></Pagination>
          </template>
        </SearchLayout>
      </div>
    </template>
  </MainLayout>
  <!-- 发起测试模态框 -->
  <InitiateCaseModal
    :isShowDialog="isShowCaseDialog"
    @confirm="handelCaseConfirm"
    @close="handelCaseClose"
    :list="InitiateCaseData"
  ></InitiateCaseModal>
  <!-- 查看 详情的 抽屉 -->
  <el-drawer
    v-model="isShowDrawer"
    title="用例详情"
    size="50vw"
    class="drawer_block"
  >
    <div class="tags_modal" v-loading="drawer_loading">
      <el-tabs v-model="active_tags" class="demo-tabs">
        <el-tab-pane label="基本信息" name="1">
          <div class="grid_container">
            <div class="grid-item">
              <div class="flex_block">
                <div class="text_left">用例名：</div>
                <div>{{ tags_info.name || "" }}</div>
              </div>
            </div>
            <div class="grid-item">
              <div class="flex_block">
                <div class="text_left">测试类型：</div>
                <div>{{ tags_info.story || "" }}</div>
              </div>
            </div>
            <div class="grid-item">
              <div class="flex_block">
                <div class="text_left">测试场景：</div>
                <div>{{ tags_info.scene || "" }}</div>
              </div>
            </div>
            <div class="grid-item">
              <div class="flex_block">
                <div class="text_left">优先级：</div>
                <div>{{ tags_info.severity || "" }}</div>
              </div>
            </div>
            <div class="full-row">
              <div class="flex_block">
                <div class="text_left">描述：</div>
                <div>{{ tags_info.description || "" }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测试步骤" name="2">
          <el-table
            :data="step_list"
            border
            :style="{ height: 'calc(100vh - 250px)' }"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            />
            <el-table-column prop="value" label="步骤" align="center" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="测试脚本" name="3" v-if="store.getters.showAdmin">
          <div class="script_block">
            <Codemirror :value="code_info" :readOnly="true"></Codemirror>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测试数据" name="4" v-if="store.getters.showAdmin">
          <div class="script_block">
            <Codemirror
              :value="tags_info.dataContent"
              :readOnly="true"
            ></Codemirror>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日志" name="5">
          <div class="script_block">
            <Codemirror
              :value="tags_info.consoleLog"
              :readOnly="true"
            ></Codemirror>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script setup>
import { test_result_list, handleTestResultLabel } from "@/api/common";
import InitiateCaseModal from "./components/InitiateCaseModal.vue";

import { AdminRecordGetTestRecordInfo } from "@/api/test_case";
import { ref } from "vue";
import { useStore } from "vuex";
const store = useStore();

const router = useRouter();
const route = useRoute();
const search_params = reactive({
  pageNum: 1,
  pageSize: 10,
  queryParams: {
    testRecordId: route.query.id || null,
    name: "",
    recordResult: "",
  },
});
const table_loading = ref(false);
const table_list = ref([]);
const table_total = ref(0);
const multipleSelection = ref([]); //存放table选中的数据
const isShowCaseDialog = ref(false); //是否显示 发起测试 的 模态框
const InitiateCaseData = ref([]); //发起测试的 列表数据
const isShowDrawer = ref(false);
const active_tags = ref("1");
const drawer_loading = ref(false);
const tags_info = ref({});
const step_list = ref([]);
const code_info = ref(null);

// 页面加载
onMounted(() => {
  console.log("store.getters.showAdmin", store.getters.showAdmin);

  handleSearchData();
});
const handlePaginationChange = (value) => {
  search_params.pageNum = value.page;
  search_params.pageSize = value.size;
  handleSearchData();
};
const handleSearchData = (type) => {
  if (!route.query.id) return ElMessage.error("请从列表页正确进入详情页");
  if (type === "search") search_params.pageNum = 1;
  search_params.queryParams.testRecordId = route.query.id;
  table_loading.value = true;
  AdminRecordGetTestRecordInfo(search_params)
    .then((res) => {
      console.log("table_list", res);

      table_list.value = res.list;
      table_total.value = res.total;
    })
    .finally(() => {
      table_loading.value = false;
    });
};
const handleReset = () => {
  search_params.queryParams.name = "";
  search_params.queryParams.recordResult = "";
  handleSearchData("search");
};
// 处理选中的用例 --- table自带
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
// 点击 执行选中 按钮
const handleActiveTableCase = () => {
  console.log("multipleSelection.value", multipleSelection.value);

  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请选择要执行的用例");
  } else {
    let list = [];
    multipleSelection.value.forEach((item) => {
      list.push({
        ...item,
        dataList: item.testExampleDataList,
        data: {
          dataPath: item.dataPath,
          exampleId: item.exampleId,
          examplePath: item.examplePath,
          isDefault: item.isDefault,
          name: item.dataName,
        },
      });
    });
    InitiateCaseData.value = [];
    isShowCaseDialog.value = true;
    InitiateCaseData.value = list;
  }
};
// 发起测试 模态框 的执行 按钮
const handelCaseConfirm = (value, params) => {
  console.log("测试的数据", value, params);
};
// 发起测试 模态框 的取消 按钮
const handelCaseClose = () => {
  isShowCaseDialog.value = false;
};
// 详情 抽屉
const handleDetails = (item) => {
  isShowDrawer.value = true;
  tags_info.value = item || {};
  if (item.step) {
    console.log("步骤：", item.step.split(","));
    let list = item.step.split(",");
    step_list.value = list.map((item) => {
      return { value: item.trim() };
    });
  }
  code_info.value = item.code || "";
};

// 返回
const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.header_modal {
  width: 100%;
  display: flex;
  align-items: center;
  .title {
    margin-top: -6px;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 18px;
  }
}
.search_layout {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0 20px;
}
.search_modal {
  flex-wrap: wrap;
  padding: 10px 0;
  .header_modal_item {
    display: flex;
    margin-right: 10px;
    min-width: 200px;
  }
}

.cur_poi {
  cursor: pointer;
}
.drawer_block {
  width: 50vw !important;
  min-width: 500px;
}
.tags_modal {
  background-color: #fff;
  height: 100%;
}
.tags_modal_info {
  .info_row {
    .info_item {
      flex: 1;
      align-items: center;
    }
  }
}
.grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 0 20px; /* 替代el-row的gutter */
  font-size: 14px;
  .full-row {
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }
  .grid-item {
    /* 每个项目的样式 */
    margin-bottom: 20px;
  }
  .text_left {
    min-width: 120px;
    width: auto;
    padding-right: 10px;
    white-space: nowrap;
    text-align: right;
  }
}
.cursor_pointer {
  font-size: 12px;
}
.script_block {
  height: calc(100vh - 250px);
  overflow-y: scroll;
}
</style>
